<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
    .lunbo{
      width: 1000px;
      position: relative;
      margin: 0 auto;
    }
    .lunbo>img{
      width: 1000px;
      height: 400px;
    }
    .left{
      position: absolute;
      left:10px;
      top:45%;
    }
    .right{
      position: absolute;
      right:20px;
      top:45%;
    }
    .lunbo>ul{
      list-style: none;
      position: absolute;
      bottom: 0;
      left: 42%;
      cursor: pointer;
    }
    .lunbo>ul>li{
      width: 10px;
      height: 10px;
      background-color: rgba(14, 179, 49, 0.8);
      border-radius: 50%;
      margin: 5px;
      float: left;
    }
    .active{
      background-color:#fff !important;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="lunbo">
      <img v-for="(elem,index) of list" :key="index" :src="elem" alt=""
       v-show="n==index"  @mouseenter="clearGo" @mouseleave="go">
      <span class="left" @click="change(prevIndex)" @mouseenter="clearGo" @mouseleave="go"><img src="./images/img/xiaoyuhao.png" alt="" ></span>
      <span class="right" @click="change(nextIndex)" @mouseenter="clearGo" @mouseleave="go"><img src="./images/img/dayuhao.png" alt=""></span>
      <ul>
        <li v-for="(v,i) of list" :key="i" :class="{'active':i===n}" 
           @click="change(i)" @mouseenter="clearGo" @mouseleave="go"></li>
      </ul>
    </div>
  </div>
  <script>
    const vm=new Vue({
      el:"#app",
      data:{
        list:[
          "./images/cys1.jpg",
          "./images/les8.jpg",
          "./images/syh2.jpg",
          "./images/jds0.jpg",
          "./images/cys0.jpg",
          "./images/tsh5.jpg",
          "./images/cys4.jpg",
          "./images/les0.jpg",
        ],
        n:0,
        innerId:null,
      },
      methods:{
        go(){
        this.innerId=setInterval(()=>{
          this.n++;
          if(this.n==this.list.length){
            this.n=0
          }
        },1000)
       },
       mounted(){
       this.go()
     },
      clearGo(){
         clearInterval(this.innerId)
       },
       change(i){
         this.n=i;
       }
      }, 
      computed: {
  //上一张
  prevIndex() {
    if(this.n == 0) {
      return this.list.length - 1;
    }else{
     return this.n-1;
    }
  },
  //下一张
  nextIndex() {
    if(this.n == this.list.length - 1) {
      return 0;
    }else {
      return this.n + 1;
    }
  }
} 
    })
  </script>
</body>
</html>